<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DOM Scripting: Web Design with JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
</head>
<body>

<div id="container">

<div id="header">
<a href="http://domscripting.com/"><img src="images/domscripting_small.gif" alt="DOM Scripting" /></a>
<img src="images/webdesignwiththedom.gif" alt="Web Design with JavaScript and the Document Object Model" />
</div>

<h1>Code Examples</h1>

<ol>
<li><h2>A brief history of JavaScript</h2></li>
<li><h2>JavaScript Syntax</h2></li>
<li><h2>The Document Object Model</h2>
	<ul>
	<li><a href="chapter03/test.html">Test</a>: <code>alert</code> title attribute</li>
	</ul>
</li>
<li><h2>A JavaScript image gallery</h2>
	<ul>
	<li><a href="chapter04/image_gallery/01/gallery.html">Image Gallery 1</a>: no JavaScript</li>
	<li><a href="chapter04/image_gallery/02/gallery.html">Image Gallery 2</a>: swapping the pictures</li>
	<li><a href="chapter04/image_gallery/03/gallery.html">Image Gallery 3</a>: swapping pictures and text</li>
	<li><a href="chapter04/image_gallery/04/gallery.html">Image Gallery 4</a>: styled</li>
	</ul>
</li>
<li><h2>Best Practices</h2>
	<ul>
	<li><a href="chapter05/example.html">Example</a>: unobtrusive popup window</li>
	</ul>
</li>
<li><h2>Image Gallery Revisited</h2>
	<ul>
	<li><a href="chapter06/image_gallery/01/gallery.html">Image Gallery 1</a></li>
	<li><a href="chapter06/image_gallery/02/gallery.html">Image Gallery 2</a></li>
	<li><a href="chapter06/image_gallery/03/gallery.html">Image Gallery 3</a></li>
	</ul>
</li>
<li><h2>Creating markup on the fly</h2>
	<ul>
	<li><a href="chapter07/01/test.html">Test</a>: <code>document.write</code> inline</li>
	<li><a href="chapter07/02/test.html">Test</a>: <code>document.write</code> external</li>
	<li><a href="chapter07/03/test.html">Test</a>: <code>alert innerHTML</code></li>
	<li><a href="chapter07/04/test.html">Test</a>: updating <code>innerHTML</code></li>
	<li><a href="chapter07/05/test.html">Test</a>: <code>alert</code> node info</li>
	<li><a href="chapter07/06/test.html">Test</a>: <code>createElement</code></li>
	<li><a href="chapter07/07/test.html">Test</a>: <code>createTextNode</code></li>
	<li><a href="chapter07/08/test.html">Test</a>: <code>appendChild</code></li>
	<li><a href="chapter07/09/test.html">Test</a>: documentFragments</li>
	<li><a href="chapter07/10/test.html">Test</a>: documentFragments</li>
	</ul>
</li>
<li><h2>Enhancing content</h2>
	<ul>
	<li><a href="chapter08/abbreviations/explanation.html">Display abbreviations</a></li>
	<li><a href="chapter08/citations/explanation.html">Display citations</a></li>
	<li><a href="chapter08/accesskeys/explanation.html">Display access keys</a></li>
	</ul>
</li>
<li><h2>CSS-DOM</h2>
	<ul>
	<li><a href="chapter09/example.html">Example</a>: <code>alert</code> changed style info</li>
	<li><a href="chapter09/itinerary/itinerary.html">Itinerary</a>: striped table</li>
	<li><a href="chapter09/story/story.html">Story</a>: styling first paragraphs</li>
	</ul>
</li>
<li><h2>Animated Slideshow</h2>
	<ul>
	<li><a href="chapter10/test.html">Test</a>: positioning and moving</li>
	<li><a href="chapter10/message/message.html">Message</a>: moving 2 elements</li>
	<li><a href="chapter10/slideshow/list.html">Slideshow</a>: simple movement</li>
	<li><a href="chapter10/slideshow2/list.html">Slideshow</a>: smooth movement</li>
	</ul>
</li>
<li><h2>Putting it all together</h2>
	<ul>
	<li><a href="chapter11/domsters/index.html">Home page</a></li>
	<li><a href="chapter11/domsters/about.html">About</a></li>
	<li><a href="chapter11/domsters/photos.html">Photos</a></li>
	<li><a href="chapter11/domsters/live.html">Live</a></li>
	<li><a href="chapter11/domsters/contact.html">Contact</a></li>
	</ul>
</li>
<li><h2>The Future of DOM Scripting</h2></li>
</ol>

</div>

</body>
</html>
